@extends("base.base")
@section("main")
    @include("Commodity.header")
    <style>
        .save {
            position: static;
            width: 80%;
            margin: 0 auto;
            margin-top: 4rem;
            height: 3rem;
            border-radius: .5rem;
            border: 0.1rem solid #ba3b3f;
            color: #ba3b3f;
            line-height: 3rem;
        }

        .title {
            font-size: 1.8rem;
            line-height: 3;
        }

        hr.style-five {
            margin: 0;
            height: 0; /* Firefox... */
            border: 0.1rem solid #ba3b3f;
            box-shadow: 0 0 0.5rem .1rem #ba3b3f;

        }

        .distpocker {
            width: 100%;
            margin: 5% 0 0 0;
            /*height: 5%;*/
        }

        .distpocker > select {
            width: 70%;
            height: 37px;
            text-align: center;
            text-align-last: center;
            -webkit-appearance: none;
            -webkit-tap-highlight-color: #fff;
            outline: 0;
            border-radius: 0.5rem;
            margin: .5rem auto;
        }

        .distpocker > select > option {
            /*display: block;*/
            /*width: 100%;*/
            /*height: 100%;*/
            text-align: center;
            text-align-last: center;
        }

        label, select {
            color: #ba3b3f;
        }
    </style>
    {{--<script src="{{asset(env('CDN_HOST')."/public/js/distpicker/distpicker.min.js")}}"></script>--}}
    <main id="main" class="main">
        {{--<div class="title">添加地址</div>--}}
        {{--<hr class="style-five">--}}
        <div id="distpocker" class="distpocker" data-toggle="distpicker" data-placeholder="false">

            <select class="provinces">
                <option value="">--选择省--</option>
            </select>
            <select class="citys">
                <option value="">--选择市--</option>
            </select>
            <select class="county">
                <option value="">--选择县--</option>
            </select>
            <div class="form-group">
                <input type="text" class="form-control" id="address_info" placeholder="详细地址">
            </div>
            <div class="form-group">
                <label for="get_name">收件人</label>
                <input type="text" class="form-control" id="get_name" placeholder="收件人">
            </div>
            <div class="form-group">
                <label for="get_phone">电话</label>
                <input type="text" class="form-control" id="get_phone" placeholder="电话">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" class="is_default" name="is_default" value="1">保存为默认地址
                </label>
            </div>
        </div>
        <div id="save" class="save">
            保存
        </div>
    </main>
    <script>
        var address =<?php echo isset($address) ? array_to_json($address) : '{}'?>;
        var submit = {}
        $("#save").on('click', function () {
            loading.show()
            if ($(".provinces option:selected").val() == '') {
                alert('请选择省')
                loading.hide()
                return false
            }
            if ($(".citys option:selected").val() == '') {
                alert('请选择市')
                loading.hide()
                return false
            }
            if ($(".county option:selected").val() == '') {
                alert('请选择县')
                loading.hide()
                return false
            }
            if ($("#address_info").val() == '') {
                alert('请填写详细地址')
                loading.hide()
                return false
            }
            if ($("#get_name").val() == '') {
                alert('请填写收件人')
                loading.hide()
                return false
            }
            if ($("#get_phone").val() == '') {
                alert('请填写电话')
                loading.hide()
                return false
            }
            if (!(/^1(3|4|5|6|7|8)\d{9}$/.test($("#get_phone").val()))) {
                alert("手机号码有误，请重填")
                loading.hide()
                return false
            }
            var data = {
                province: $(".provinces option:selected").val(),
                city: $(".citys option:selected").val(),
                county: $(".county option:selected").val(),
                address_info: $("#address_info").val(),
                get_name: $("#get_name").val(),
                get_phone: $("#get_phone").val(),
                is_default: $(".is_default").prop("checked") ? 1 : 0,
                _token: csrf_token,
            }
            $.post("/api/add_user_address", data, function (data) {
                if (data.errorCode == 0) {
                    window.location.href = '/user/address/list'
                } else {
                    alert(data.errorMsg)
                }
                loading.hide()
            }, 'json')
        })


        load_option(address.p_p, '.provinces')
        load_option(address['p_' + $(".provinces option:selected").val()], '.citys')
        post_county()

        //省的改动事件
        $('.provinces').on('change', function () {
            load_option(address['p_' + $(".provinces option:selected").val()], '.citys')
            post_county()
        })

        //市的改动事件
        $('.citys').on('change', function () {
            if (typeof address['p_' + $(".citys option:selected").val()] == 'undefined')
                post_county()
            else
                load_option(address['p_' + $(".citys option:selected").val()], '.county')
        })

        //获取县
        function post_county() {
            loading.show()
            $.post('/api/get_county', {parent: $(".citys option:selected").val(), _token: csrf_token}, function (data) {
                if (data.errorCode == 0) {
                    address['p_' + $(".citys option:selected").val()] = data.data
                    load_option(address['p_' + $(".citys option:selected").val()], '.county')
                } else {
                    alert(data.errorMsg)
                }
                loading.hide()
            })
        }

        function load_option(data, select) {
            var html = ''
            for (k in data) {
                html += '<option value="' + data[k].id + '">' + data[k].fullname + '</option>'
            }
            $(select).html(html)
            $(select).val($(select).find('option').eq(0).val())
            // $(select).find('option').eq(0).click()
        }

        loading.hide()
    </script>
@endsection